<template>
    <ul>
        <li v-for="(item,i) in list" :key="i" @click="detailJump(item.itmType, item)">
            <van-image width="143px" height="87px" :src="appUrl + item.itmIcon" lazy-load/>
            <div class="white-bg info">
                <p class="word-clamp-2">
                    <i class="public-mobile-icon"></i>
                    <template v-if="item.recommendDetailDTO">
                        <span class="compulsory" v-if="item.recommendDetailDTO.compulsoryInd">{{$t('cos_required')}}</span>
                    </template>
                    <span>{{item.itmTitle}}</span>
                </p>
                <span class="font-size10 color999 icon">
                    <span>{{_courseType(item.itmType)}}</span>
                    <span><i class="user-icon"></i>{{item.totalLearner || 0}}</span>
                </span>
            </div>
        </li>
    </ul>
</template>
<script>
import { Image as VanImage } from 'vant';
export default {
    name: 'courseListItem',
    components: {
        [VanImage.name]: VanImage
    },
    props: {
        list: {
            type: Array,
            default() {
                return [];
            }
        },
        isExam: {
            type: Boolean,
            default() {
                return false;
            }
        }
    },
    data() {
        return {};
    },
    methods: {
        /**
         * 课程类型分类
         * */
        _courseType(type) {
            switch (type) {
            case 'SELFSTUDY':
                return this.isExam ? this.$t('exam_type_selfstudy') : this.$t('cos_type_selfstudy');
            case 'CLASSROOM':
                return this.isExam ? this.$t('exam_type_classroom') : this.$t('cos_type_classroom');
            case 'INTEGRATED':
                return this.$t('cos_type_integrated');
            case 'MAP':
                return this.$t('cos_type_map');
            case 'AUDIOVIDEO':
                return this.$t('new_open_course');
            case 'KNOWLEDGE':
                return this.$t('cos_type_topic');
            }
        },
        /**
         * 跳转至详情页
         * */
        detailJump(type, item) {
            if (type && type === 'AUDIOVIDEO') { //跳转到公开课
                this.$router.push({path: `/publicClass/openDetail/${item.itmId}`});
            } else if (type === 'MAP') {
                this.$router.push({path: '/studyMapDetail', query: {itmId: item.itmId, title: item.itmTitle}});
            } else if (type === 'KNOWLEDGE') {
                this.$router.push({path: '/knowledgeDetail', query: {id: item.ksId, title: item.ksTitle}});
            } else if (type === 'CLASSROOM' && !item.itmExamInd) {
                this.$router.push({path: `/certifiedCourse/${item.itmId}/0`});
            } else {
                this.$router.push({path: `/course/${item.itmId}/0`});
            }
        }
    }
};
</script>
<style scoped lang="less">
    ul{
        padding: 20px 15px 0;
        li{
            display: flex;
            margin-bottom: 8px;
            /deep/.van-image__img{
                border-top-left-radius:3px;
                border-bottom-left-radius:3px;
            }
            .info{
                flex: 1;
                padding: 8px 12px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border-top-right-radius:3px;
                border-bottom-right-radius:3px;
                p{
                    margin-bottom: 20px;
                }
                .icon{
                    display: flex;
                    justify-content: space-between;
                }
                .compulsory{
                    display: inline-block;
                    padding: 0 5px;
                    background: #075ebb;
                    color:#fff;
                    font-size:12px;
                }
            }
        }
    }
</style>
